<template>
  <div>
    <page-header title="用户信息" back sticky></page-header>
    <page-main class="user-content-main" background="transparent" padding="0px">

      <div class="main-left">

        <div class="base-info">

          <avatar :src="userInfo.avatar" :size="55"></avatar>

          <div class="base-info-value">
            <p class="base-info-value-username">{{ userInfo.nickname }}</p>
            <p class="base-info-value-username">{{ userInfo.username }}</p>
            <p class="base-info-value-id"><i class="overall-icon icon-renzheng2 "></i> ID: {{ userInfo.id }}
            </p>
            <div class="user-tags-list">
              <span class="user-tags-list-li">测试1</span>
              <span class="user-tags-list-li">测试2</span>
              <span class="user-tags-list-li">测试3</span>
            </div>
          </div>

        </div>

        <div class="chunk-title">
          <div class="chunk-color"></div>
          <span class="chunk-title-value">基本信息</span>
        </div>

        <div class="user-base-list">
          <div class="user-base-list-li">
            <span class="list-left">性别</span>
            <span class="list-right">{{ userInfo.gender  }}</span>
          </div>
          <div class="user-base-list-li">
            <span class="list-left">手机号</span>
            <span class="list-right">{{ userInfo.mobile  }}</span>
          </div>
          <div class="user-base-list-li">
            <span class="list-left">邮箱</span>
            <span class="list-right">{{ userInfo.email}}</span>
          </div>
          <div class="user-base-list-li">
            <span class="list-left">创建时间</span>
            <span class="list-right">{{ userInfo.mobile  }}</span>
          </div>
          <div class="user-base-list-li">
            <span class="list-left">最近活跃</span>
            <span class="list-right">11点15分</span>
          </div>
          <div class="user-base-list-li">
            <span class="list-left">状态</span>
            <span class="list-right">{{ userInfo.state  }}</span>
          </div>
        </div>
        <div class="chunk-title">
          <div class="chunk-color"></div>
          <span class="chunk-title-value">账号操作</span>
        </div>

        <div class="user-options-list">
          <div class="user-options-list-li" v-for="(item, index) in userOptions" :key="index"
            @click="ClickUserOption(index)">
            <i :class="item.icon" class="overall-icon user-options-list-li-icon"></i>
            <span class="user-options-list-li-text">{{ item.name }}</span>
          </div>
        </div>

      </div>
      <div class="main-right overall-flex-1 overall-flex overall-flex-column">
        <page-tags :selectKey="TagsSelectKey" :list="TagsList" @clickItem="clickTags"></page-tags>
        <div class="user-info-router">
          <keep-alive>
            <routerView></routerView>
          </keep-alive>
        </div>
      </div>
    </page-main>
          <!-- 拉黑用户 -->
    <el-dialog append-to-body title="提示" :visible.sync="ToBlackDialog" width="30%" :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
import pageTags from "~/page-tags/page-tags.vue"
import pageMain from "~/page-main/page-main.vue";
import pageHeader from "~/page-header/page-header.vue";
import avatar from "../../assets/overall/components/avatar/avatar.vue";
import ManageAPI from "@/api/manage";
import routerView from "@/pages/layout/components/router-view/router-view.vue";
export default {
  components: {
    routerView,
    avatar,
    pageMain,
    pageHeader,
    pageTags
  },
  created() {
    this.pageInit();
  },
  data() {
    return {

      // 拉黑用户弹窗
      ToBlackDialog: false,

      userid: null,
      userInfo: {},
      TagsList: [
        { name: "我的信息", key: 0, path: "/userManagement/info/base" },
        { name: "实名认证", key: 1, path: "/userManagement/info/real" },
        { name: "角色设置", key: 2, path: "/userManagement/info/auth" },
        { name: "我的设备", key: 3, path: "/userManagement/info/device" },
        { name: "安全设置", key: 4, path: "/userManagement/info/anquan" },
        { name: "我的地址", key: 5, path: "/userManagement/info/address" },
        { name: "邀请好友", key: 6, path: "/userManagement/info/inviter" },
        { name: "操作日志", key: 7, path: "/userManagement/info/real" },
      ],
      TagsSelectKey: 0,
      userOptions: [
        {
          name: "拉黑",
          icon: "icon-renzheng",
          key: 0
        }, {
          name: "登出",
          icon: "icon-renzheng",
          key: 1
        }, {
          name: "限制",
          icon: "icon-renzheng",
          key: 2
        }, {
          name: "转入临时",
          icon: "icon-renzheng",
          key: 3
        }, {
          name: "删除",
          icon: "icon-renzheng",
          key: 4
        }
      ]
    };
  },
  methods: {

    // 点击用户操作组
    ClickUserOption(index) {

      switch (index) {
        case 0: // 拉黑
          this.ToBlackUser()
          break;
        case 1: // 登出
          this.LogoutUser()
          break;
        case 2: // 限制
          this.LimitUser()
          break;
      }

    },


    // 拉黑用户
    ToBlackUser() {
      this.$confirm("确定拉黑该用户？", "拉黑用户", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
    },
    // 移出黑名单

    // 限制
    LimitUser() {

    },

    // 登出
    LogoutUser() {

      this.$confirm("确定登出该用户？", "登出用户", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
    },

    // 转入临时
    // 转入正式
    // 删除
    RemoveUser() {

    },



    // 点击顶部选项卡
    clickTags(item) {

      let { key, path } = item

      let query = this.$route.query

      this.TagsSelectKey = key

      this.$router.replace({ path, query })
    },
    // 页面初始化
    pageInit() {
      let { userid } = this.$route.query;
      this.userid = userid;
      this.getUserInfo();
    },
    // 获取用户信息
    getUserInfo() {
      ManageAPI.userInfo({
        user: this.userid,
      })
        .then((res) => {
          console.log("res",res);
          let {data} = res
          this.userInfo = data
        })
        .catch((err) => {
          this.$message({
            message: err.msg,
            type: "error",
          });
        });
    },
    clickAvatar() {
      console.log("点击了头像");
    },
    clickEditAvatar() {
      console.log("点击了头像更换");
    },
    // 点击拉黑
    clickToBlack() {
      this.$confirm("确定拉黑该用户？", "拉黑用户", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.$message({
          type: "info",
          message: "保存修改",
        });
      });
    },
    // 点击取消拉黑
    clickCancelBlack() { },
    // 点击限制
    clickRestrict() { },
    // 点击取消限制
    clickCancelRestrict() { },
    // 点击了删除
    clickRemove() {
      this.$confirm("确定删除该用户？", "删除用户", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.$message({
          type: "info",
          message: "保存修改",
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  gap: 15px
}


.chunk-title {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 0px;

  .chunk-color {
    width: 4px;
    height: 20px;
    background: rgb(231, 99, 11);
    margin-right: 10px
  }

  .chunk-title-value {
    font-size: 1rem;
  }

}

.user-base-list {

  display: flex;
  flex-direction: column;
  padding-top: 10px;
  margin-bottom: 10px;

  .user-base-list-li {

    $height: 30px;

    display: flex;
    height: $height;
    font-size: .8rem;


    .list-left {
      width: 25%;
      line-height: $height;
      text-align: right;
      margin-right: 15px;
    }

    .list-right {
      flex: 1;
      line-height: $height;
    }
  }


}

.user-content-main {
  display: flex;
  gap: 20px;
  height: 100%;

  .main-left {
    width: 260px;
    height: 600px;
    background: white;
    border-radius: 8px;
    padding: 15px;

    .base-info {
      margin-bottom: 10px;
      height: 80px;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .user-tags-list {
      margin-top: 4px;
      display: flex;
      font-size: .7rem;
      gap: 6px;

      .user-tags-list-li {
        border-radius: 4px;
        padding: 1px 3px;
        border: 1px solid #409eff36;
        background: #35c5e721;
        color: #5eaaf9;
      }
    }

    .base-info-value-username {
      font-size: 1rem;
      font-weight: bold;
      margin-top: 4px;
    }

    .base-info-value-id {
      margin-top: 6px;
      margin-bottom: 6px;
    }

    .user-options-list {

      display: flex;
      flex-wrap: wrap;
      padding-top: 10px;
      gap: 11px;

      &-li {
        width: 30%;
        height: 65px;
        border-radius: 8px;
        box-shadow: 0px 0px 3px rgb(184, 179, 179);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 100ms all linear;

        &:hover {
          background-color: #a6c9ee;
          box-shadow: none;
        }

        &-icon {
          font-size: 1.4rem;
          margin-bottom: 10px;
        }

        &-text {}
      }

    }

  }

  .main-right {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;

    .user-info-router {
      flex: 1;
      height: 200px;
      overflow-y: auto;
      margin-top: 20px;
    }
  }
}


.main-left {
  top: 20px;
  width: 320px;
  padding-bottom: 25px;
  box-sizing: border-box;
  border-radius: 6px;
  gap: 24px;

  &-user {
    margin-bottom: 15px;
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 8px;

    &-top {
      display: flex;
      gap: 15px;
      align-items: center;
      padding: 15px;

      &-base-info {
        flex: 1;
        height: 100%;
        color: gray;

        &-username {
          font-size: 1rem;
          margin-bottom: 6px;
        }

        &-real-icon {
          font-size: .8rem;
          margin-right: 4px;
          color: rgb(6, 105, 218);
          font-weight: bold;
        }
      }
    }

    &-bottom {
      flex: 1;
    }
  }
}

.tabs-options {
  background: white;
  padding: 10px 18px;
}

.tabs-content {
  background: white;
  height: 600px;
}

.tabs-content-swiper {
  background: white;
}

.tabs-content-swiper-li {
  width: 100%;
  height: 100%;
  padding: 10px 25px;
  box-sizing: border-box;
}

.tabs-options-li {
  text-align: center;
  height: 45px;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
}

.tabs-options-li:hover .tabs-options-li-active {
  height: 4px;
}

.tabs-options-li-content {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px 15px;
}

.tabs-options-li-active {
  transition: 0.1s height linear;
  height: 0px;
  width: 100%;
  background: orangered;
}

.descriptions-box {
  margin-bottom: 18px;
}

.li-content {
  margin-left: 15px;
  flex: 1;
  height: 100%;

  justify-content: space-between;
  display: flex;
  align-items: center;
}

.li-content-key {
  font-size: 0.8rem;
}

.li-content-value {
  font-size: 0.8rem;
  margin-top: 4px;
}

.anquan-box-li-icon {
  font-size: 1.9rem;
}

.li-content-status {
  font-size: 0.8rem;
}

.user-case {
  gap: 15px;
  padding: 0px 0px;
  background: white;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0px 3px 7px 1px #e1d6d669;

  &-li {
    border-radius: 8px;
    height: 80px;
    background: white;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;

    &-top {
      font-size: 1.2rem;
    }

    &-bottom {
      color: gray;
    }
  }
}

.case-li {
  height: 55px;
  flex: 1;
  background: rgba(245, 240, 240, 0.664);
}

.case-li-button {
  border-radius: 4px;
  --height: 20px;
  height: var(--height);
  line-height: var(--height);
  text-align: center;
  background: transparent;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.case-li-button i {
  font-size: 1.1rem;
}

.black-button {
  color: rgb(75, 74, 74);
}

.remove-button {
  color: red;
}

.user-tag-list {
  height: 100px;
}
</style>
